<template>
  <el-card class="common-container">
    <div style="margin-bottom: 20px; font-size: 20px;color: #606266;">角色管理</div>
    <div class="search-container">
      <el-input class="search-wrap" size="medium" />
      <el-button type="primary" size="medium" icon="search">查询</el-button>
      <el-button type="primary" size="medium" icon="add" @click="handleAdd">新建角色</el-button>
    </div>

    <el-table size="medium" :data="list" border>
      <el-table-column prop="name" align="center" label="角色" />
      <el-table-column prop="num" align="center" label="资源权限">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.allPermission" type="success">全部权限</el-tag>
          <el-tag v-else>自定义权限</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="description" align="center" label="说明" />
      <el-table-column align="center" label="操作" width="350">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="primary" @click="handlePerm(scope.row)">权限</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="listQuery.page"
          :page-size="listQuery.limit"
          :total="total"
          layout="total, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-table>
    <role-dialog ref="roleDialog" :scope="scope" />
    <role-perm-dialog ref="roleResourceDialog" :scope="scope" />
  </el-card>
</template>

<script>
import RoleDialog from './components/role'
import RolePermDialog from './components/RolePermDialog'
import { listRole, deleteRole } from '@/api/role'

export default {
  components: {
    RoleDialog, RolePermDialog
  },
  data() {
    return {
      scope: 0,
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        name: undefined
      },
      list: []
    }
  },

  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      listRole(this.listQuery, this.scope).then((res) => {
        if (res.code === 0) {
          this.list = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    handleFilter() {
      this.fetchData()
    },

    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.fetchData()
    },

    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.fetchData()
    },
    handleAdd() {
      this.$refs.roleDialog.openAdd().then(() => {
        this.fetchData()
      })
    },
    handleEdit(role) {
      this.$refs.roleDialog.openEdit(role.id).then(() => {
        this.fetchData()
      })
    },
    handlePerm(role) {
      this.$refs.roleResourceDialog.edit(role.id).then(() => {
        this.fetchData()
      })
    },
    handleViewUser() {
      this.$refs.roleDialog.openAdd().then(() => {
        this.fetchData()
      })
    },
    handleDelete(role) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRole(role.id, this.scope).then((res) => {
          if (res.code === 0) {
            this.fetchData()
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .search-container {
    margin-top: 20px;
    margin-bottom: 20px
  }

  .search-wrap {
    width: 300px;
    margin-right: 10px
  }
</style>
